<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <div>123</div>
        <script>
            // 1. 页面加载事件：加载外部资源：图片 外联css 和js等 加载完毕触发，可以给某个元素绑定
            window.addEventListener('load', function () {
                alert('')
            })
            // 图片加载事件：图片加载完毕触发
            // img.addEventListener('load', function () {
            //     alert('')
            // })
            // 2. 页面加载事件：加载DOM结构完毕触发，不包括样式和图片等资源
            document.addEventListener('DOMContentLoaded', function () {
                alert('')
            })
            // 3. 页面滚动事件：除了window，还可以给某个元素绑定
            window.addEventListener('scroll', function () {
                console.log('滚动了')
            })
            // 3.1 获取滚动距离  有：scrollLeft scrollTop 是可修改的 数字无单位
            // 获取html 需要 document.documentElement
            const htmlElement = document.documentElement;
            const scrollTop = htmlElement.scrollTop;



            // 4. 页面尺寸事件：resize
            // 获取可见部分宽高（不包括border margin 滚动条等） clientWidth clientHeight
            const div = document.querySelector('div')
            console.log(div.clientWidth, div.clientHeight)

            // 获取元素的尺寸：offsetWidth offsetHeight：包括border padding 如果是隐藏的元素，值为0
            // 获取元素的位置：offsetLeft offsetTop：相对于 定位 父元素的位置（如果父元素无定位继续向上），只读不能修改的
            // getBoundingClientRect() 返回元素的大小及其相对于视口的位置

            // e.pageY e.clientY e.screenY 的区别 滚动时候鼠标不动，e.pageY 会变，e.clientY 不变，e.screenY 不变
            document.addEventListener('click', function (e) {
                console.log(e.pageY, e.clientY, e.screenY)
            })



        </script>

    </body>
</html>